<template>
	<div class="business-role">
		<div class="left">
			<div class="left-title">全部角色</div>
			<div v-if="list.length===0" class="nothing">无</div>
			<div v-if="list.length>0" ref="leftMenu" class="left-menu" @scroll="onScrollLeftMenu">
				<el-scrollbar ref="" style="height:100%" class="hid-scrollbar-x">
					<el-menu :default-active="roleActiveIndex">
						<el-menu-item v-for="(item,index) in list" :key="index" :index="String(index)"
							@click="handlePerm(item.id,index)">
							<span slot="title">{{ item.name }}</span>
							<div class="edit-btn">
								<i v-if="!$store.getters.banBtnList.includes('BTN_ROLE_EDIT')"
									class="el-icon-edit app-text-color-primary"
									@click.stop="handleEdit(item.id,index)" />
								<i v-if="!$store.getters.banBtnList.includes('BTN_ROLE_DELETE')"
									class="el-icon-delete app-text-color-danger"
									@click.stop="handleDelete(item.id,index)" />
							</div>
						</el-menu-item>
					</el-menu>
				</el-scrollbar>
			</div>
		</div>

		<div class="right">
			<div class="flexRBC user-num">
				<div class="title">
					<div v-if="list.length>0">
						当前权限角色名：
						<span class="app-text-color-primary">{{ list[roleActiveIndex].name }}</span>
					</div>
				</div>
				<div>
					<el-button v-if="!$store.getters.banBtnList.includes('BTN_ROLE_ADD')" type="primary" size="medium"
						round @click="handleAdd">新增角色</el-button>
				</div>
			</div>
			<!-- <div class="right-left">
        <div class="title">使用场景</div>
        <ul class="content">
          <el-menu :default-active="roleTypeActiveIndex" @select="roleTypeSelect">
            <el-menu-item index="0" key="0">
              <span slot="title">商户平台</span>
            </el-menu-item>
            <el-menu-item index="1" key="1">
              <span slot="title">商户助手</span>
            </el-menu-item>
            <el-menu-item index="1"   key="1">
              <span slot="title">小程序</span>
            </el-menu-item>
            <el-menu-item index="2"   key="2">
              <span slot="title">公众号</span>
            </el-menu-item>
          </el-menu>
        </ul>
      </div>-->
			<div class="right-right">
				<!-- <div class="title">可用权限</div> -->
				<div class="content">
					<div v-if="list.length==0" class="nothing">无</div>
					<!-- <div v-show="list.length!=0" class="role-box"> -->
					<!-- <el-scrollbar style="height:100%" class="hid-scrollbar-x" ref=""> -->
					<role-resource v-else ref="roleResource" :scope="scope" />
					<!-- </el-scrollbar> -->
				</div>
			</div>
		</div>

		<dialog-role ref="roleDialog" :scope="scope" />
	</div>

</template>

<script>
	import DialogRole from './components/DialogRole'
	import RoleResource from './components/RolePerm'
	import {
		listRole,
		deleteRole
	} from '@/api/role'
	import {
		isCanDelete
	} from '@/api/user'

	export default {
		components: {
			DialogRole,
			RoleResource
		},
		props: {},
		data() {
			return {
				// 配置
				// roleTypeActiveIndex: "0",
				roleActiveIndex: '0',
				scope: 2,
				total: 0,
				// 数据
				listQuery: {
					pageNum: 1,
					pageSize: 999,
					name: undefined
				},
				list: [],
				roleId: 0 // 记录roleId值
			}
		},
		watch: {},

		mounted() {
			this.fetchData()
		},
		methods: {
			/**
			 * 获取数据
			 */
			// 获取角色
			fetchData(type = '') {
				listRole(this.listQuery, this.scope).then(res => {
					if (res.code === 0) {
						this.list = res.data.list.filter(i => i.type !== 1)
						this.total = res.data.total
						if (this.list.length > 0 && type === '') {
							this.handlePerm(this.list[0].id, 0)
						}
						if (this.list.length > 0 && type === 'add') {
							this.$nextTick(() => {
								this.handlePerm(
									this.list[this.list.length - 1].id,
									this.list.length - 1
								)
							})
						}
						if (this.list.length > 0 && type === 'edit') {
							this.handlePerm(this.roleId, this.roleActiveIndex)
						}
					} else {
						this.$message.error(res.msg)
					}
				})
			},

			// 滚动事件
			onScrollLeftMenu() {
				const el = this.$refs.leftMenu
				const offsetHeight = el.offsetHeight
				const scrollTop = el.scrollTop
				const scrollHeight = el.scrollHeight
				if (offsetHeight + scrollTop - scrollHeight >= -1) {
					//  滚动到底部加载更多数据
				}
			},

			/**
			 * 按钮组
			 */

			// handleSizeChange(val) {
			//   this.listQuery.pageSize = val;
			//   this.fetchData();
			// },

			// handleCurrentChange(val) {
			//   this.listQuery.pageNum = val;
			//   this.fetchData();
			// },

			// 新增
			handleAdd() {
				this.$refs.roleDialog.openAdd().then(() => {
					this.fetchData('add')
				})
			},

			// 编辑
			handleEdit(roleId, index) {
				this.roleId = roleId
				this.roleActiveIndex = String(index)
				this.$refs.roleDialog.openEdit(roleId).then(() => {
					this.fetchData('edit')
				})
			},

			// 打开对应权限
			handlePerm(roleId, index) {
				this.roleId = roleId
				this.roleActiveIndex = String(index)
				this.$nextTick(() => {
					this.$refs.roleResource.open(roleId).then(() => {})
				})
			},

			// 删除
			async handleDelete(roleId, index) {
				let canDel = await this.isCanDeleteFun(roleId)
				if (canDel) {
					this.$confirm(
						`此操作将永久删除角色${this.list[index].name}, 是否继续?`,
						'提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
							center: true,
							roundButton: true
						}
					).then(() => {
						deleteRole(roleId, this.scope).then(res => {
							if (res.code === 0) {
								this.fetchData()
								this.$notify({
									title: '成功',
									message: '删除成功',
									type: 'success',
									duration: 2000,
									offset: 40
								})
							} else {
								this.$message.error(res.msg)
							}
						})
					})
				}

			},
			// 是否可删除
			isCanDeleteFun(roleId) {
				return new Promise(resolve => {
					isCanDelete(roleId).then(res => {
						if (res.code === 0) {
							resolve(true)
						} else {
							this.$message.error(res.msg)
							resolve(false)
						}
					})
				})
			},

			// roleTypeSelect(key) {
			//   if(key==="0"){//管理后台
			//     /*role_id this.scope*/
			//     this.scope=1
			//     this.$refs.roleResource.open(this.roleId).then(() => {});
			//   }else if(key==="1"){//商户助手
			//     this.scope=2
			//     this.$refs.roleResource.open(this.roleId).then(() => {});
			//   }
			//   this.roleTypeActiveIndex = key;
			// }
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.business-role {
		overflow: hidden;
		max-height: calc(100vh - 80px);
	}

	.left {
		overflow: hidden;
		float: left;
		height: 100%;
		margin-right: 10px;
		border-radius: 5px;
		background-color: #fff;

		&-title {
			height: 50px;
			padding: 0 10px;
			line-height: 50px;
			border-bottom: 1px solid #e7e7e7;
			font-size: 20px;
			font-weight: bold;
		}

		&-menu {
			height: calc(100vh - 130px);
		}
	}

	.right {
		overflow: hidden;
		padding: 24px 10px 24px 20px;
		background-color: #fff;

		// .role-box {
		// height: calc(100vh - 160px);
		// }
		.title {
			font-size: 18px;
			font-weight: bold;
		}

		.user-num {
			height: 56px;
			padding: 0 10px 14px 10px;
			border-bottom: 1px solid #e7e7e7;
		}
	}

	.nothing {
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	// 去el-menu左边border
	.el-menu {
		border-right: none;

		.el-menu-item {
			padding-right: 70px;
		}

		.el-menu-item:hover .edit-btn {
			display: block;
		}

		.edit-btn {
			display: none;
			position: absolute;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}
</style>
